import React, { Component } from 'react';
import ReactDOM from 'react-dom';
// import App from './App';
import mockData from '../data.json';

console.log('this is searchCom',mockData)
//表单输入注意：必须绑定value和onchange事件
class SearchCom extends React.Component{
    constructor(props){
        super(props);
        this.state={
            value:'',
            result:''
        };
        this.keyDown =this.keyDown.bind(this);
    };
    inputChange=(e)=>{
        // console.log('inputChange事件触发啦',e);
        // console.log(typeof e.nativeEvent.data);
        if(e.nativeEvent.data && this.state.value.length<11){
            this.setState({
                value:document.querySelector('#provinceInput').value
            })
            console.log('---',this.state.value)
        }else if(this.state.value.length>=11){
            alert('最多输入11个字符')
        }
    };
    keyDown(e){
        this.setState({
            value:document.querySelector('#provinceInput').value
        })
        // console.log('keyDwon函数触发啦',e);
        if(e.keyCode==13){
            for(let i=0;i<mockData.length;i++){
               if(mockData[i].province==this.state.value){
                   return  this.setState({
                       result:(
                           <div>
                               <p>province:{mockData[i].province}</p>
                               <p>diagnosis:{mockData[i].diagnosis} 人</p>
                               <p>death:{mockData[i].death} 人</p>
                               <p>cure:{mockData[i].cure} 人</p>
                           </div>
                       )
                    })
                }
            }
            this.setState({
                result:'请输入正确的城市'
            })
             
        };
        if(e.keyCode==8){
            console.log('this.state.value.length=>',this.state.value.length);
            if(this.state.value.length>0){
                let len =(this.state.value.length-2)<0?0:this.state.value.length-1;
                this.setState({
                    value: this.state.value.substring(0,len)
                });
                document.querySelector('#provinceInput').value=this.state.value;
            }
        }
    };
    render(){
        return (
            <div>
                <p style={{width:'300px',height:'80px',border:'1px solod #eee'}}>
                    城市：
                    <input placeholder="请输入要查询的城市" type='text'  id='provinceInput' 
                    onChange={this.inputChange} onKeyDown={this.keyDown}/>
                </p>
                <div style={{backgroundColor:'#999',border:'1px solid orange'}}>
                    <h6>搜索的结果是：</h6>
                    <div>
                        {this.state.result ? this.state.result :'暂无数据'}
                    </div>
                </div>

            </div>
            

        )
    }

}




//导出关于表单的动态组件
export default SearchCom;


